<template>
  <el-dialog
      v-model="isShowDialog"
      title="对象详情"
      width="400"
  >
    <div class="content-wrap">
      <div class="header-pic">
        <el-image v-if="detail.type == 'folder'" :src="FolderIcon"/>
        <el-image v-else-if="detail.type == 'docx'" :src="WordIcon"/>
        <el-image v-else-if="detail.type == 'excel'" :src="ExcelIcon"/>
        <el-image v-else-if="detail.type == 'ppt'" :src="PptIcon"/>
        <el-image v-else-if="detail.type == 'pdf'" :src="PdfIcon"/>
        <el-image v-else-if="detail.type == 'audio'" :src="AudioIcon"/>
        <el-image v-else-if="detail.type == 'video'" :src="VideoIcon"/>
        <el-image v-else-if="detail.type == 'android'" :src="AndriodIcon"/>
        <el-image v-else-if="detail.type == 'java'" :src="JarIcon"/>
        <el-image v-else-if="detail.type == 'photo'" :src="detail.src" :fit="'cover'" lazy/>
        <el-image v-else-if="detail.type == 'txt'" :src="TxtIcon"/>
        <el-image v-else :src="UnknowIcon"/>
      </div>
      <div class="info-wrap">
        <p><span>文件名</span>{{ detail.name }}{{ detail.type != 'folder' ? ("." + detail?.extension) : "" }}</p>
        <p v-if="detail.type == 'folder'"><span>文件类型</span>{{ detail.isCloud ? "云文件夹" : "本地文件夹" }}</p>
        <p v-else><span>文件类型</span>{{ detail.mimeType }}</p>
        <template v-if="detail.type!='folder'">
          <p><span>文件大小</span>{{ detail.size }}</p>
          <p><span>文件Exif</span>{{ detail.exif }}</p>
          <p v-if="detail.cloud != null && detail.cloud.tag != null && detail.cloud.tag != ''">
            <span>文件标签</span>{{ detail.cloud.tag }}</p>
        </template>
        <p><span>创建时间</span>{{ detail.createdAt }}</p>
        <p><span>更新时间</span>{{ detail.updatedAt }}</p>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShowDialog = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {reactive, toRefs, defineComponent, nextTick} from 'vue';
import FolderIcon from '/@/assets/attach/folder_icon.svg'
import WordIcon from '/@/assets/attach/word_icon.png'
import ExcelIcon from '/@/assets/attach/excel_icon.png'
import TxtIcon from '/@/assets/attach/txt_icon.png'
import PptIcon from '/@/assets/attach/ppt_icon.png'
import PdfIcon from '/@/assets/attach/pdf_icon.png'
import AudioIcon from '/@/assets/attach/audio_icon.png'
import VideoIcon from '/@/assets/attach/video_icon.png'
import AndriodIcon from '/@/assets/attach/android_icon.svg'
import JarIcon from '/@/assets/attach/jar_icon.png'
import UnknowIcon from '/@/assets/attach/unkonw_icon.png'
import {getFileInfo} from "/@/api/attachment";

export default defineComponent({
  name: 'attachmentItemDetail',
  setup(props, {emit}) {
    const state = reactive({
      isShowDialog: false,
      detail: {
        id: 0,
        name: null,
        type: "unknown",
        src: UnknowIcon
      }
    });

    // 打开弹窗
    const openDialog = (_id: any, _type: any) => {
      state.detail = {
        id: 0,
        name: null,
        type: "",
        src: ""
      };
      state.isShowDialog = false;
      nextTick(() => {
        //获取角色信息
        getFileInfo({id: _id, type: _type}).then((res: any) => {
          state.detail = res.data
        });
        state.isShowDialog = true;
      })
    };
    return {
      FolderIcon,
      WordIcon,
      ExcelIcon,
      TxtIcon,
      PptIcon,
      PdfIcon,
      AudioIcon,
      VideoIcon,
      AndriodIcon,
      JarIcon,
      UnknowIcon,
      openDialog,
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss" scoped>
.content-wrap {
  .header-pic {
    text-align: center;
    margin-bottom: 10px;

    .el-image {
      width: 140px;
      height: 140px;
      border-radius: 10px;
    }
  }

  .info-wrap {
    p {
      margin: 8px 0;
      font-weight: bold;

      span {
        font-weight: normal;
        color: grey;
        margin-right: 6px;
        display: inline-block;
        width: 60px;
      }
    }
  }
}
</style>
